﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sortable.aspx.cs" Inherits="JQuery.Samples.Sortable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .dropCue
        {
            display: block;
            border: dashed 3px #CFCFCF;
            background: white;
        }
        span
        {
            margin: 5px;
        }
        span.moveable, span.fixed
        {
            border: solid 1px blue;
            background-color: #AAAAFF;
            display: block;
        }
        span.fixed
        {
            background-color: #4444FF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/jquery-1.3.2.min.js" />
                <asp:ScriptReference Path="~/jquery-ui-1.7.1.custom.min.js" />
            </Scripts>
        </asp:ScriptManager>
        <table width="100%">
            <tr>
                <td>
                    <asp:Panel ID="dndPanel1" runat="server" CssClass="widgets">
                        <asp:Label ID="Label1" runat="server" CssClass="moveable" Text="a" />
                        <asp:Label ID="Label2" runat="server" CssClass="moveable" Text="b" />
                        <asp:Label ID="Label4" runat="server" CssClass="fixed" Text="1" />
                        <asp:Label ID="Label5" runat="server" CssClass="fixed" Text="2" />
                        <asp:Label ID="Label6" runat="server" CssClass="moveable" Text="c" />
                        <asp:Label ID="Label3" runat="server" CssClass="fixed" Text="3" />
                    </asp:Panel>
                </td>
                <td>
                    <asp:Panel ID="dndPanel2" runat="server" CssClass="widgets">
                        <asp:Label ID="Label9" runat="server" CssClass="fixed" Text="1" />
                        <asp:Label ID="Label10" runat="server" CssClass="fixed" Text="2" />
                        <asp:Label ID="Label7" runat="server" CssClass="moveable" Text="a" />
                        <asp:Label ID="Label8" runat="server" CssClass="moveable" Text="b" />
                        <asp:Label ID="Label11" runat="server" CssClass="moveable" Text="c" />
                        <asp:Label ID="Label12" runat="server" CssClass="fixed" Text="3" />
                    </asp:Panel>
                </td>
            </tr>
        </table>
        <jQuery:SortableExtender ID="SortableExtender1" runat="server"  DropPlaceHolderCssClass="dropCue" TargetControlSelector="$dndPanel1"
            DraggableSelector=".moveable" ConnectSelector=".widgets" CursorAt="{ top:0, left:10 }">
            <Start>
                function(event, ui)
                {
                    ui.placeholder.height(ui.item.height());
                }
            </Start>
            </jQuery:SortableExtender>
        <jQuery:SortableExtender id="DragDropjQueryExtender1" runat="server" DropPlaceHolderCssClass="dropCue"
            TargetControlSelector="$dndPanel2" DraggableSelector=".moveable" ConnectSelector=".widgets" CursorAt="{ top:0, left:10 }" />
    </div>
    </form>
</body>
</html>

